﻿<div class="panel panel-primary">
    <div class="panel-heading">

        <h3 class="panel-title"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Periodo</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" role="form">

            <input type="hidden" name="id" id="id" value="{{Id}}" />
            <div class="form-group" id="nombreGroup">
                <label for="inputNombre" class="col-sm-2 control-label">Nombre</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="inputNombre" placeholder="Nombre" value="{{Nombre}}" maxlength="50">
                </div>
            </div>
            <div class="form-group" id="descripcionGroup">
                <label for="inputDescripcion" class="col-sm-2 control-label">Descripcion</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="inputDescripcion" placeholder="Descripcion" value="{{Descripcion}}" maxlength="300">
                </div>
            </div>
            <div class="form-group" id="fechas">
                <label for="inputFechaInicio" class="col-sm-2 control-label">Fecha de Inicio</label>
                <div class="col-sm-2">
                    <input type="date" class="form-control" id="inputFechaInicio" value="{{FechaInicio}}">
                </div>
                <label for="inputFechaFin" class="col-sm-1 control-label">Fecha de Fin</label>                
                <div class="col-sm-2" id='datetimepickerFin'>
                    <input id="inputFechaFin" type='text' class="form-control" value="{{FechaFin}}"/>
                    <span class="input-group-addon">
                        <span class="fa fa-calendar"></span>
                    </span>
                </div>
                <div class="control-group">
                    <label for="estado" class="col-sm-1 control-label">Estado</label>
                    <div class="col-sm-3">
                        <select name="estado" id="estado" class="form-control">
                            <option value="Activo">Activo</option>
                            <option value="Inactivo">Inactivo</option>

                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group" id="BtnGuardar">
                <div class="col-sm-offset-9">
                    <a id="guardar" class="btn btn-primary guardar" href="#"><i class="fa fa-save"></i>&nbsp;&nbsp;Guardar Período</a>
                </div>
            </div>
            <div class="form-group" id="parciales">
                <div class="col-sm-offset-1 col-sm-10">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">Parciales</h4>
                        </div>
                        <div class="panel-body">
                            <table id="table_id" class="display">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Descripcion</th>
                                        <th>Fecha desde</th>
                                        <th>Fecha Hasta</th>
                                        <th>Estado</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                            </table>

                            <div class="row">
                                <div class="col-sm-2">
                                    <a id="agregarParcial" class="btn btn-success agregarParcial" href="#" style="text-align: right"><i class="fa fa-plus"></i>Agregar</a>
                                </div>
                            </div>
                            <br />
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="container-fluid">
                    <!--<div class="col-sm-offset-4 col-sm-1">
                        <a id="guardar" class="btn btn-primary guardar" href="#" style="text-align: right"><i class="icon-save"></i>Guardar</a>
                    </div>-->
                    <div class=" col-sm-offset-5 col-sm-1">
                        <a id="cancelar" class="btn btn-primary" href="/periodos" style="text-align: left"><i class="fa fa-remove"></i>Cancelar</a>
                    </div>
                    <div class="col-sm-1">
                        <a id="regresar" class="btn btn-primary" href="/periodos" style="text-align: left"><i class="fa fa-undo"></i>Regresar</a>
                    </div>
                </div>
            </div>
        </form>
        <a id="navigateParcial" href="#" style="visibility: hidden" />
    </div>
</div>
